Lenguaje script de navegador: JavaScript

JavaScript

JavaScript es un lenguaje utilizado en el desarrollo de aplicaciones web con la idea de aumentar la interacción con el usuario e introducir ciertos efectos (dinamismo) en la web. Se trata de un "lenguaje de programación" interpretado y ligero que permite realizar Scripts.

Un Script es todo programa de secuencia de comandos.

Aunque JavaScript no es considerado un lenguaje de programación, posee unas estructuras similares a las de cualquier lenguaje:

Sentencias.
Palabras reservadas.
Estructuras de control.

Para poder introducir código JavaScript en una web existen diferentes alternativas:

Embebido en el código HTML: el código del script debe encerrarse entre etiquetas HTML <script>.
Utilizando un archivo externo: esta alternativa se apoya en un archivo de texto plano que se incluye en la cabera del documento web.
En los elementos HTML: se utiliza para realizar llamadas a funciones JavaScript, por ejemplo, para el control de campos de formularios.

Para facilitar el mantenimiento de las aplicaciones web se suele utilizar un archivo externo para incluir el código JavaScript de la aplicación.

Ejemplos

Sentencias


xxxxxxxxxx
6
1
//sentencia "for" para bucles
2
var i 
3
for (i=0;i<=10;i++) { 
4
    document.write(i)
5
    document.write("<br>") 
6
}

Sentencias

Palabras reservadas


xxxxxxxxxx
13
1
var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme";
2
var letras = cadena.split("");
3
var resultado = "";
4

5
for(i in letras) {
6
  if(letras[i] == 'a') {
7
    break; // break es por ejemplo una palabra reservada
8
  }
9
  else {
10
    resultado += letras[i];
11
  }
12
}
13
alert(resultado);

Palabras_reservadas

Estructuras de control


xxxxxxxxxx
12
1
// Estructura funcion
2
function suma(n1, n2) { 
3
  var r = n1 + n2;
4
  alert("El resultado es " + r);
5
}
6

7
// Declaracion de las variables
8
var numero1 = 3;
9
var numero2 = 5;
10

11
// Llamada a funcion
12
suma(numero1, numero2);

Estructura_de_control

DOM

BOM

Vista general del modelo generado que ejecuta el navegador

DOM (Document Objet Model), modelo de objetos del documento, es una estructura arbórea que crea el navegador cuando se carga una web.

Si el navegador encuentra HTML mal escrito, lo corrige automáticamente al construir el modelo.

En DOM, cada etiqueta HTML es un objeto.

En DOM se encuentran diferentes tipos de elementos:

Documento: es la raíz de la estructura generada.
Elemento: existe uno por cada etiqueta HTML.
Atributo.
Texto.

DOM ofrece diferentes tipos de funciones para crear y/o borrar elementos del documento web, permitiendo a los programadores disponer de un control preciso sobre la estructura del documento.

Ejemplo

HTML


xxxxxxxxxx
12
1
<!DOCTYPE html>
2

3
<html>
4
  <head>
5
    <meta charset="utf 8">
6
    <title >Asignatura DAR - Test DOM</title>
7
  </head>
8
  <body>
9
    <h1>Hola UNIR</h1>
10
    <p align=center><ul><li>Hola</li></ul></p>
11
  </body>
12
</html>

DOM

DOM_viewer

Existen diferentes formas de acceso a los nodos dependiendo del tipo al que hagamos referencia:

A través de su padre.
Acceso directo: existen diferentes funciones para el acceso directo. Las mas utilizadas son: getElementsByTagName o getElementsbyName

La propiedades de navegación se dividen en dos grupos:

Navegar a través de nodos

Propiedades de elementos HTML	Descripción
`childNodes`	Devuelve una lista de nodos hijos. Incluye nodos de texto y comentarios.
`parentNode`	Devuelve el nodo padre del nodo o si no tiene.
`firstChild`	Devuelve el primer nodo hijo.
`lastChild`	Devuelve el último nodo hijo.
`previousSibling`	Devuelve el nodo hermano anterior o si no tiene.
`nextSibling`	Devuelve el nodo hermano siguiente o si no tiene.

Navegar a través de elementos

Propiedades de elementos HTML	Descripción
`children`	Devuelve una lista de elementos HTML hijos.
`parentElement`	Devuelve el padre del elemento o si no tiene.
`firstElementChild`	Devuelve el primer elemento hijo.
`lastElementChild`	Devuelve el último elemento hijo.
`previousElementSibling`	Devuelve el elemento hermano anterior o si no tiene.
`nextElementSibling`	Devuelve el elemento hermano siguiente o si no tiene.

Eventos

Una de las posibilidades de JavaScript es poder manejar eventos que ocurren en un documento web.

Un evento es una señal de que algo ha ocurrido.

La introducción de eventos permite realizar controles, interactuar con el usuario... Aunque una de las limitaciones es la incompatibilidad con todos los navegadores, por ello, para poder incluir eventos es necesario saber cuáles son los que se pueden incluir.

Hay diferentes categorías de eventos:

Eventos del mouse:

Evento	Descripción
`click`	Se pulsa el botón izquiedo del ratón, foco o enter.
`dbclick`	Se pulsa dos veces el botón izquiedo del ratón.
`mousedown`	Se pulsa cualquier botón del ratón.
`mouseup`	Se suelta cualquier botón del ratón.
`mouseover`	El puntero del ratón se encuentra fuera de un elemento y entra.
`mouseout`	El puntero del ratón se encuentra dentro de un elemento y sale.
`mousemove`	Continuo cuando el puntero del ratón se encuentra sobre un elemento.

Eventos del teclado:
Evento Descripción
keydown Se pulsa cualquier tecla del teclado.
keypress Se pulsa una tecla de un carácter alfanumérico.
keyup Se suelta cualquier tecla pulsada.
Eventos del elemento form.
Eventos del documentos.
Eventos CSS.

Evento	Descripción
`keydown`	Se pulsa cualquier tecla del teclado.
`keypress`	Se pulsa una tecla de un carácter alfanumérico.
`keyup`	Se suelta cualquier tecla pulsada.

Para interactuar con eventos se requiere de una función handler, que ejecuta un código JavaScript cuando ocurre algo.

El handler se establece en el HTML con un atributo llamado on<event>.

Hay tres formas de asignar handlers:

Con atributos HTML:
<button onclick="alert(this.innerHTML)">Haz click en mí</button>
En las propiedades del DOM:
elem.onclick = function
A través de métodos:
- Para agregar: elem.addEventListener(event, handler[, phase])
- Para quitar: removeEventListener

jQuery

JQuery es una librería multiplataforma de JavaScript que facilita la programación de JavaScript, proporcionando un código más reducido y compatible con casi todos los navegadores.

JQuery implementa funcionalidades avanzadas, es decir, utiliza el DOM internamente para facilitar las tareas a los desarrolladores.

JQuery está programada de modo eficiente, ocupando una decena de KBs.

Principales características

Código comprensible y fácil de leer y escribir.
Fácil de escalar y mantener.
Permite la selección de elementos DOM.
Interactividad y modificaciones del DOM, con soportes para CSS.
Maneja eventos.
Efectos y animaciones personalizadas.
Facilita el manejo de AJAX.
Otras utilidades como: obtener información del navegador, operar con objetos y vectores, funciones para rutinas comunes...

Comparativa entre código JavaScript y jQuery

JavaScript


xxxxxxxxxx
3
1
function cambiaFondo(color) {
2
document.body.style.background = color;
3
}

jQuery


xxxxxxxxxx
1
1
$('body').css('background','#ccc');

Navegación

Navegación DOM

Propiedades	Descripción
`children()`	Obtener todos los nodos hijo o descendientes del nodo actual.
`parent()`	Obtener el nodo padre o nodo ascendente del nodo actual.
`parents`	Obtener todos los ascendentes del nodo hasta la raíz.
`sibilings`	Obtener todos los nodos hermano del nodo actual.
`nest()` y `prev()`	Avanzar o retroceder a través de la lista de nodos hermanos.

Manipulación DOM

Propiedades de elementos HTML	Descripción
Get Content	Extraer el contenido del HTML.
SetContent	Poner contenido a un elemento HTML.
Get Form Fields	Obtener el valor de un campo de un formulario.
Set Form Fields	Asignar valor a un campo de un formulario.
Replacement Elements	Reemplazar un elemento completo del DOM.

Sintaxis de jQuery

La sintaxis de jQuery se basa en el objeto jQuery ó $().

Este objeto tiene sus métodos, por lo que la forma más común sería la siguiente: $("selector").metodo(argumentos);

En esta sintaxis básica observamos las siguientes partes:

El objeto jQuery al principio $(), indicado por el signo "dolar" seguido de un paréntesis.
- Al objeto jQuery se le pasa como argumento (dentro del paréntesis) un "selector", que buscará en la página uno o varios elementos para trabajar con ellos.
Le sigue un método del objeto jQuery. Para ello, escribimos primero un punto, después el nombre del método, y luego entre paréntesis los argumentos.
Los argumentos (dentro del paréntesis) que se le pasan al método pueden ser muy variados, desde algunos métodos que no requieren argumentos a otros en los que podemos poner funciones anónimas que incluyan otros métodos.

Ejemplos

Selecciona el primer elemento <a> con la clase external.

$(‘a.external:first');

Selecciona todos los elementos <tr> impares de una tabla.

$(‘tr:odd');

Selecciona todos los elementos del tipo input dentro del formulario #myForm.

$(‘#myForm:input');

Selecciona todos los <divs> visibles.

$(‘div:visible');

Selecciona los <divs> excepto los 3 primeros.

$(‘div:gt(2)’);

Selecciona todos los párrafos de la página con al menos un enlace.

$(‘p[a]');

Selecciona todos los radiobutton de los formularios de la página.

$(‘input:radio');

Selecciona todos los enlaces que contengan la palabra "Imprimir“.

$(‘a:contains("Imprimir")');

Selecciona todos los elementos pares de una lista.

$("ul#menuPrincipal li:even”);

Selecciona todos los elementos impares de una lista.

$("ul#menuPrincipal li:odd”);

AJAX (Asynchronous JavaScript y XML)

El funcionamiento normal de una web implica que al cambiar un elemento de su interfaz sea necesario enviar una petición al servidor y que este reenvíe la página completa modificada. Sin embargo, esto tiene sentido cuando se trata de una página nueva y no cuando se trata de un cambio aislado en su contenido, ya que realizar recargas innecesarias no es optimo y aumenta los tiempos de carga.

Para este propósito, se hace uso de una combinación de diferentes tecnologías llamada AJAX (Asynchronous JavaScript y XML), que permite recargar determinadas áreas de la web sin tener que realizar una recarga completa de la página. Mejorando los tiempos de respuesta de las aplicaciones.

Con AJAX, JavaScript no tiene que esperar la respuesta del servidor, sino que puede:

Ejecutar otros scripts a la espera de respuesta del servidor.
Tratar la respuesta cuando la respuesta esté lista.

Características

En AJAX se utiliza una combinación de:

CSS (estilo de los datos).
JavaScript/DOM (para mostrar e interactuar con la información).
XML y/o JSON (formato de transferencia de datos).
Objeto XMLHttpRequest (intercambio de datos asíncrono con el servidor).

Uso de tecnologías Ajax:

XML/JSON se utiliza para encapsular los datos en la respuesta del servidor.
XHTML para apariencia y estructuración a la hora de presentar los datos.
DOM para poder posicionar en nuestra estructura los datos recuperados.
XMLHttpRequest, que no es una tecnología como tal, pero todo el funcionamiento de AJAX gira en torno a este objeto.

Para poder utilizar AJAX en una web es necesario activar dicha funcionalidad.

Para ello se distinguen los siguientes pasos:

Llamada a JavaScript AJAX: La petición al servidor debe realizarse a través de una función JavaScript que a su vez realice la llamada a AJAX.
Petición asíncrona al servidor: La función que realiza la petición debe utilizar un objeto especial llamado XMLHttpRequest, que debe procesar la petición asíncrona. Este funcionamiento permite que la página siga con su funcionamiento normal mientras se cargan los nuevos datos.
Recuperación de datos: Cuando se procesan los datos recibidos en el elemento XMLHttpRequest, es necesario adaptarlos y recuperar la parte relevante.
Modificación de la página: El cliente es el responsable de actualizar los datos y visualizar los cambios realizados.

`XMLHttpRequest`

El objeto XMLHttpRequestes el fundamento de AJAX y todos los navegadores actuales lo soportan.

La sintaxis básica para crear un objeto XMLHttpRequest es: variable = new XMLHttpRequest(); ➔ request = new XMLHttpRequest();

Para enviar una solicitud a un servidor, se utilizan los métodos open() y send() del objeto XMLHttpRequest:

.open(method, url, async)
- method: el tipo de petición: GET o POST.
- url: la ubicación del archivo en el servidor.
- async: true (asíncrono) o false (síncrono).
  Ejemplo: xhttp.open("GET", “texto.txt", true);
.send (cadena): Envía la solicitud de apagado al servidor para peticiones POST.

Métodos GET y POST:

GET envía los datos usando la URL y es más simple y más rápido que POST, pudiendose utilizar en la mayoría de los casos.
POST envía los datos ocultos al usarse cuando:
- Se actualiza un archivo o base de datos en el servidor.
- Se procesa una gran cantidad de datos en el servidor.
- Se requiere seguridad adicional con caracteres especiales.

Cuando se utiliza async = true, especifica una función que se ejecutará cuando la respuesta esté lista en el evento onreadystatechange.

Usar async = false no es recomendable, pero para unos requerimientos pequeños esto puede ser aceptable.

Para obtener una respuesta del servidor, se utiliza la propiedad responseText o responseXML del objeto XMLHttpRequest:

responseText: obtiene los datos de respuesta como una cadena.
responseXML: obtiene los datos de respuesta como datos XML.

Tres propiedades importantes del objeto XMLHttpRequest:

El evento onreadystatechange se dispara cada vez que cambia el readyState.
La propiedad readyState tiene el estatus de XMLHttpRequest:
1. Petición inicializada.
2. Conexión establecida.
3. Petición recibida.
4. Procesamiento solicitudes.
5. Solicitud terminada y la respuesta está lista.
Status:
- 200: OK.
- 404: Page not found.

El evento onreadystatechange se desencadena cinco veces (0-4), una vez para cada cambio en readyState.

Lo ideal es tener readyState en 4 y el status es 200.

by Jose Manuel Pinillos